<template>
  <div class="order">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-nav-bar
        title="订单"
      />
    </div>
    <div class="tab">
      <van-tabs class="tab_bar"  v-model="active" sticky animated >
        <van-tab title="全部订单" >
          <van-card
            v-for="order in AllOrderData"
            :key="order.id"
            @click="toDetails(order)">
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="order.customer.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{order.customer.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px"
                v-if="order.status=='待接单'" color="#45b97c" plain>{{order.status}}</van-tag>
                  <van-tag style="position: relative; left: 83%; top: -5px" v-else-if="order.status=='待服务'" color="#dea32c" plain>{{order.status}}</van-tag>
                  <van-tag style="position: relative; left: 83%; top: -5px" v-else-if="order.status=='已完成'" color="#7232dd" plain>{{order.status}}</van-tag>
                  <van-tag style="position: relative; left: 83%; top: -5px" v-else-if="order.status=='待确认'" color="#2196f3" plain>{{order.status}}</van-tag>
                <div style="margin-top: auto;">地址：{{order.address.city}}{{order.address.area}}{{order.address.address}}</div>
            </template>
              <template #price-top>
                <div>时间： {{order.orderTime | dateFormat}}</div>
            </template>
            <template #price>
              <span>总价：{{'¥'+order.total+'.00'}}</span>
            </template>
            <template #footer>
              <div v-if="order.status=='待接单'">
                <van-button color="#ed1941" round size="mini" @click.stop="refuseOrder(order.id)">✖拒绝</van-button>
              <van-button color="linear-gradient(to right, #AAFFA9, #11FFBD)" round size="mini" @click.stop="acceptOrder(order.id)">✔接单</van-button>
              </div>
              <van-button v-else-if="order.status=='待服务'" color="#009ad6" round size="mini" @click.stop="confirmOrder(order.id)">服务结束</van-button>
              <div v-else-if="order.status=='已完成'">
                  <van-button v-if="order.comments[0]" color="linear-gradient(to right, #808080, #3fada8)" round size="mini" @click="showOrdercontent(order.comments)">查看评价</van-button>
              <van-button v-else color="linear-gradient(to right, #2196f3, #3fada8)" round size="mini">未评价</van-button>
              </div>
              
            </template>
            </van-card>
            <div style="height:80px"></div>
          </van-tab>
        <van-tab title="待接单">
          <van-empty
                v-if="orderData1[0] == null"
                class="custom-image"
                image="https://img1.baidu.com/it/u=3518834411,2584165971&fm=26&fmt=auto&gp=0.jpg"
                description="暂无订单"
              />
          <van-card
            v-for="order in orderData1"
            :key="order.id"
            :thumb="order.customer.userFace"
            @click="toDetails(order)">
            <template #price>
              <div>{{'¥'+order.total+'.00'}}</div>
            </template>
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="order.customer.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{order.customer.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px" color="#45b97c" plain>{{order.status}}</van-tag>
                <div>{{order.address.city}}{{order.address.area}}{{order.address.address}}</div>
            </template>
              <template #price-top>
                <div>{{order.orderTime | dateFormat}}</div>
            </template>
            <template #price->
                <div>{{order.orderTime}}</div>
            </template>
            <template #footer>
              <van-button color="#ed1941" round size="mini" @click.stop="refuseOrder(order.id)">✖拒绝</van-button>
              <van-button color="#5691c8" round size="mini" @click.stop="acceptOrder(order.id)">✔接单</van-button>
            </template>
            </van-card> 
            <div style="height:80px"></div>
            </van-tab>
        <van-tab title="待服务">
              <van-empty
                v-if="orderData2[0] == null"
                class="custom-image"
                image="https://img1.baidu.com/it/u=3518834411,2584165971&fm=26&fmt=auto&gp=0.jpg"
                description="暂无订单"
              />
               <van-card
            v-for="order in orderData2"
            :key="order.id"
            @click="toDetails(order)">
            <template #price>
              <div>{{'¥'+order.total+'.00'}}</div>
            </template>
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="order.customer.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{order.customer.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px" color="#dea32c" plain>{{order.status}}</van-tag>
                <div>{{order.address.city}}{{order.address.area}}{{order.address.address}}</div>
            </template>
              <template #price-top>
                <div>{{order.orderTime | dateFormat}}</div>
            </template>
            <template #footer>
              <van-button color="#009ad6" round size="mini" @click.stop="confirmOrder(order.id)">服务完成</van-button>
            </template>
            </van-card>
            <div style="height:80px"></div>
        </van-tab>
        <van-tab title="已完成">
            <van-empty
                v-if="orderData3[0] == null"
                class="custom-image"
                image="https://img1.baidu.com/it/u=3518834411,2584165971&fm=26&fmt=auto&gp=0.jpg"
                description="暂无订单"
              />
             <van-card
            v-for="order in orderData3"
            :key="order.id"
            :price="order.total + '00'"
            @click="toDetails(order)">
            <template #price>
              <div>{{'¥'+order.total+'.00'}}</div>
            </template>
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="order.customer.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{order.customer.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px" color="#7232dd" plain>{{order.status}}</van-tag>
                <div>{{order.address.city}}{{order.address.area}}{{order.address.address}}</div>
            </template>
              <template #price-top>
                <div>{{order.orderTime | dateFormat}}</div>
            </template>
            <template #price->
                <div>{{order.orderTime}}</div>
            </template>
             <template #footer>
              <van-button v-if="order.comments[0]" color="linear-gradient(to right, #808080, #3fada8)" round size="mini" @click="showOrdercontent(order.comments)">查看评价</van-button>
              <van-button v-else color="linear-gradient(to right, #2196f3, #3fada8)" round size="mini">未评价</van-button>
            </template>
            </van-card>
            <div style="height:80px"></div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import {get,post} from '@/http/axios'
export default {
  data() {
    return {
      //已完成
        orderData3: [],
        //待服务
        orderData2: [],
        //待接单数组
        orderData1: [],
      AllOrderData: [],
      active: 0,
      userId: '',
      list: {
          page: 1,
          pageSize: 100,
          employeeId: ''
        },
      
    };
  },
  computed: {
    ...mapState('user',['userInfo'])
  },
  methods: {
    //查看评价
    showOrdercontent() {},
    //服务完成
    async confirmOrder(orderId) {
      console.log(orderId);
      let res = await get('/order/serviceCompleteOrder',{orderId})
      this.$notify({ type: 'success', message: '确认成功',background:'linear-gradient(to right, #2196f3, #3fada8)'});
      let list = {
        page: 1,
          pageSize: 100,
          employeeId: this.userId,
          status: '待服务'
      }
      this.getOrderData2(list)
    },
    //拒绝接单
     async refuseOrder(orderId) {
        let res = await get('/order/rejectOrder',{orderId})
      this.$notify({ type: 'success', message: '拒绝成功!', background:'#f7797d'});
      let list = {
        page: 1,
          pageSize: 100,
          employeeId: this.userId,
          status: '待接单'
      }
      this.getOrderData1(list)
    },
    //接单
    async acceptOrder(orderId) {
      let res = await get('/order/takeOrder',{orderId})
      this.$notify({ type: 'success', message: '接单成功', background:'linear-gradient(to right, #2196f3, #3fada8)' });
      let list = {
        page: 1,
          pageSize: 100,
          employeeId: this.userId,
          status: '待接单'
      }
      this.getOrderData1(list)
      list.status = '待服务'
      this.getOrderData2(list)
    },
    // 引入order vuex中的方法
    ...mapActions('user',['getUserInfo']),
    // 获取订单数据
    async getAllOrderData(list) {
      console.log(list);
        let res =await get('/order/pageQuery',list)
        console.log(res.data.data.list);
        this.AllOrderData = res.data.data.list
    },
    //获取已完成数据
      async getOrderData3(list) {
        let res =await get('/order/pageQuery',list)
        this.orderData3 = res.data.data.list
      },
      //获取待确认数据
      async getOrderData2(list) {
        let res =await get('/order/pageQuery',list)
        this.orderData2 = res.data.data.list
        // console.log(res.data.data.list);
      },
      //获取待接单数据
      async getOrderData1(list) {
        let res =await get('/order/pageQuery',list)
        
        this.orderData1 = res.data.data.list
      },
      //跳转订单详情页面
      toDetails(orderData) {
        this.$router.push({
        path: '/manager/Details',
        query: {
          orderData: orderData
        }
      })
      },
  },
  created() {
     this.getUserInfo().then((r) => {
        this.userId = this.userInfo.id
         this.list.employeeId = this.userInfo.id
         this.getAllOrderData(this.list)
         this.list.status = '待接单'
         this.getOrderData1(this.list)
         this.list.status = '待服务'
         this.getOrderData2(this.list)
         this.list.status = '已完成'
         this.getOrderData3(this.list)
        //  console.log(this.list);
      })
  },
};
</script>

<style scoped>
.van-nav-bar {
  background-image: linear-gradient(to right,  #74ebd5,#ACB6E5);
}
.van-card {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px;
  margin: 15px;
}

</style>